// todo 引入组件库
import { Layout } from 'antd';
import { useState } from 'react';

import styles from './index.less';

import Menu from './components/Menu';
import Header from './components/Header';
import Nav from './components/Nav';

import { IRouteComponentProps, Redirect } from 'umi';

const { Content, Footer, Sider } = Layout;

const App = (props: IRouteComponentProps) => {
  // todo 控制左边的sider组件是否收起来
  const [collapsed, setCollapsed] = useState<boolean>(false);

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={(value) => setCollapsed(value)}
      >
        <div className={styles.logo} />
        <Menu />
      </Sider>
      <Layout className="site-layout">
        <Header />
        <Nav />
        <Content style={{ margin: '16px' }}>
          <div style={{ padding: 24, minHeight: 360 }}>
            {/* {props.children} */}
            {props.location.pathname === '/admin' ? (
              <Redirect to="/admin/welcome"></Redirect>
            ) : (
              props.children
            )}
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Ant Design ©2018 Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};

App.wrappers = ['@/wrappers/auth'];

export default App;
